<template>
    <div class="home">
        <header>
            <home-header>
                <template #search>
                    <div class="home-search flex">
                        <img :src="'/public/images/home/search.png'" alt="搜索小图标" class="home-search__icon">
                        <input type="text" class="home-search__input" placeholder="提示语">
                    </div>
                </template>
            </home-header>
        </header>
        
        <main class="home-main">

            <slide-tab></slide-tab>

            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                class="home-main__card"
                >
                <card-ver-display
                v-for="item in cardItems"
                :key="item.id"
                :item="item"
                ></card-ver-display>
            </van-list>



        </main>

        <footer class="home-footer">
            <home-footer></home-footer>
        </footer>
    </div>
</template>

<script setup>
import homeHeader from './components/homeHeader.vue'
import slideTab from './components/slideTab.vue'
import homeFooter from './components/homeFooter.vue';
import cardVerDisplay from '@/components/cardVerDisplay.vue'
import { onMounted, ref } from 'vue';
import {throttle} from '@/utils/public';

const cardItems = ref();

// 上拉获取加载
const loading = ref(false);
// 结束上拉获取
const finished = ref(false);

const count = ref(10);

// 生成一个100到400之间的随机整数
function getRandomNumber() {
  return Math.floor(Math.random() * 301) + 100;

}

// 随机生成一个完整的六位 HEX 颜色（例如：#abcdef）
function getRandomHexColor() {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);  // 生成一个 0 到 16777215 的随机数字
  return `${randomColor.padStart(6, '0')}`;  // 使用 padStart 保证是六位的 HEX 颜色代码
}



// 生成数据
function makeData(params){
    let {count} = params;
    let baseUrl = 'https://placehold.co/';
    let res = [];

    // console.log('count',count);


    for(let i=0;i<count;i++){
        let item = {};
        let imgwidth = getRandomNumber();
        let imgHeight = getRandomNumber();
        let bgc = getRandomHexColor();
        let color = getRandomHexColor();

        let avatarWidth = Math.floor(imgwidth/10);
        let avatarHeight = Math.floor(imgHeight/10);

        let imgUrl = baseUrl+imgwidth+'x'+imgHeight+'/'+bgc+'/'+color;
        let avatar_url = baseUrl+avatarWidth+'x'+avatarHeight+'/'+bgc+'/'+color;

        item.pic_url=imgUrl||'';
        item.avatar_url = avatar_url||'';
        item.click_count = imgwidth||'';
        item.id = `display${i}`

        let randNum = Math.floor(Math.random()*2);
        if(randNum%2===0){
            item.desc='内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
            item.username = 'username1'
        }else{
            item.desc='内容内容内容'
            item.username = '用户昵称'
        }

        if(typeof item!=='undefined'){
            // console.log('undefined');
            res.push(item);
        }

        // console.log(res);
    }
    return res;
}

// 获取数据
function getCard(params){
    try{
        const res = makeData(params);
        cardItems.value = res;
        console.log('getCard 获取数据成功',res);
    }catch(err){
        console.log('getCard 获取数据失败',err);
    }
}

// 使用 throttle 限制刷新函数在 1000 毫秒内只执行一次
const throttledRefresh = throttle((params)=>getCard(params), 1000);

const onLoad = () => {
    console.log('触底了！');
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
    count.value = count.value+10;
    let params = {
        count:count.value
    }
    try{
        throttledRefresh(params);
        console.log('上拉获取成功');
    }catch(err){
        console.log('上拉获取数据失败');
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (cardItems.value.length >= 40) {
        finished.value = true;
    }
    }, 1000);
};


onMounted(()=>{
    let params = {
        count:count.value,
    }
    getCard(params);
})


</script>

<style lang="scss" scoped>
input{
    border: none;
    background-color: transparent;
}

input:focus{
    outline: none;
}

.home{
    width: 100%;
    height: 100%;
    // &-header{
    //     width: 100%;
    //     height: pxToRem(100);
    //     background-color: skyblue;
    // }
    // position: relative;
    &-search{
        width: 95%;
        height: pxToRem(40);
        margin: 0 auto;
        background-color: #eee;
        border-radius: 30px;
        box-sizing: border-box;
        padding-left: 20%;
        margin-bottom: pxToRem(20);

        &__icon{
            height: pxToRem(25);
            aspect-ratio: 1/1;
            object-fit: cover;
        }

        &__input{
            height:100%;
        }
    }

    &-main{
        &__card{
            display: grid;
            width: pxToRem(350);
            margin: 0 auto;
            grid-template-columns: repeat(2,pxToRem(150));
            grid-template-rows: auto;
            row-gap: pxToRem(20);
            justify-content: space-between;
        }
    }

    &-footer{        
        width: 100%;
        // height: pxToRem(100);
        // background-color: orange;
        position: fixed;
        bottom: 0;
    }
}
</style>